import React, { Component } from "react";
// withRouter 高阶组件（一个函数接收一个组件，返回一个新的组件） => 能够为组件注入路由属性 withRouter(组件)
// a.1 引入 一个高阶组件 withRouter
import {
  HashRouter as Router,
  Route,
  Link,
  withRouter,
} from "react-router-dom";

const Login = (props) => {
  return (
    <div>
      <button
        onClick={() => {
          console.log(props);
          props.history.push("home");// /home 主页的路径
        }}
      >
        登录
      </button>
    </div>
  );
};
class Home extends React.Component{
  render(){
    return <div>
      <h1>Home 组件</h1>
      <button onClick={()=>{
        console.log(this.props);// history => 通过component 形式注入的
        this.props.history.go(-1);
      }}>后退</button>
    </div>
  }
}
// a.2. 要导出的组件地方使用 withRouter 对 Login 组件注入路由的属性
const WithRouterLogin = withRouter(Login);
class App extends Component {
  render() {
    return <Router>
     {/*a.3 使用 WithRouterLogin 组件*/}
      <WithRouterLogin></WithRouterLogin>
      <Route path="/home" component={Home}></Route>
    </Router>;
  }
}

export default App;
